<template>
  <div class="info-card">
    <div
      :style="{
        'background-image': `url(${cover_images[(info.name || '').toLowerCase()]})`,
      }"
      class="info-img">
      <!-- <img :src="baseApi + '/' + info.bgImage "> -->
    </div>
    <div class="info-des">
      <p>{{ info.name }}</p>
      <span>{{ info.remark }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InfoCard',
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      cover_images: {
        ams: require('../../assets/images/cover_images/ams.jpg'),
        apc: require('../../assets/images/cover_images/apc.jpg'),
        dms: require('../../assets/images/cover_images/dms.jpg'),
        eap: require('../../assets/images/cover_images/eap.jpg'),
        mtms: require('../../assets/images/cover_images/mtms.jpg'),
        pms: require('../../assets/images/cover_images/pms.jpg'),
        rms: require('../../assets/images/cover_images/rms.jpg'),
        tms: require('../../assets/images/cover_images/tms.jpg'),
        oee: require('../../assets/images/cover_images/oee.jpg'),
        tdm: require('../../assets/images/cover_images/tda.jpg')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.info-card{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  .info-img{
    width: 40%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .info-des{
    width: 55%;
    p{
      font-size: 32px;
      color: #333;
      position: relative;
      &::after{
        content: '';
        width: 45px;
        height: 1px;
        position: absolute;
        bottom: -20px;
        left: 5px;
        display: block;
        background-color: #333;
      }
    }
    span{
      font-size: 16px;
      color: #666;
      display: block;
      width: 100%;
      max-height: 70%;
      overflow: hidden;
      white-space: pre-line;
      text-overflow: ellipsis;
      display: -webkit-box; // 作为弹性伸缩盒子模型显示。
      -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp: 10; // 显示的行
    }
  }
}
</style>
